import 'package:flutter/material.dart';
import '../model/post.dart';

class ViewLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridViewBuild();
  }
}

/**
 * GridView.builder的使用
 */
class GridViewBuild extends StatelessWidget {
  Widget _gridItemBuild(BuildContext context, int index) {
    return Container(
      child: Image.network(
        postList[index].imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(8.0),
      itemCount: postList.length,
      //SliverGridDelegateWithFixedCrossAxisCount.crossAxisCount
      //SliverGridDelegateWithMaxCrossAxisExtent.maxCrossAxisExtent
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//        crossAxisCount: 3,
        maxCrossAxisExtent: 150,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
      ),
      itemBuilder: _gridItemBuild,
    );
  }
}

/**
 * GridViewExtent的使用
 */
class GridViewExtentDemo extends StatelessWidget {
  List<Widget> _buildItem(int length) {
    return List.generate(length, (index) {
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0.0, 0.0),
        child: Text(
          'Item: $index',
          style: TextStyle(
            fontSize: 18.0,
            color: Colors.grey,
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      //交叉轴显示的item长度
      maxCrossAxisExtent: 150.0,
      //左右间距
      crossAxisSpacing: 8.0,
      //上下间距
      mainAxisSpacing: 8.0,
      //设置滚动方向-水平和垂直
      scrollDirection: Axis.vertical,
      children: _buildItem(100),
    );
  }
}

/**
 * GridView 网格布局的使用
 */
class GridViewDemo extends StatelessWidget {
  List<Widget> _buildItem(int length) {
    return List.generate(length, (index) {
      return Container(
        color: Colors.grey[300],
        alignment: Alignment(0.0, 0.0),
        child: Text(
          'Item: $index',
          style: TextStyle(
            fontSize: 18.0,
            color: Colors.grey,
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //交叉轴显示的数量
      crossAxisCount: 3,
      //左右间距
      crossAxisSpacing: 8.0,
      //上下间距
      mainAxisSpacing: 8.0,
      //设置滚动方向-水平和垂直
      scrollDirection: Axis.vertical,
      children: _buildItem(100),
    );
  }
}

/**
 * PageView.builder的使用
 */
class ViewPageBuild extends StatelessWidget {
  Widget _pageItemBuild(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          child: Image.network(
            postList[index].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                postList[index].title,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 30.0,
                  color: Colors.black,
                ),
              ),
              Text(
                postList[index].author,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 30.0,
                  color: Colors.black,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: postList.length,
      itemBuilder: _pageItemBuild,
    );
  }
}

/**
 * PageView的使用
 */
class ViewPageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      //页面在哪里就在哪里，false不会自动滚动
      pageSnapping: true,
      //children内容为反方向
      reverse: false,
      //滚动方向-垂直和水平
      scrollDirection: Axis.horizontal,
      //滚动监听回调
      onPageChanged: (currentPageIndex) =>
          {debugPrint("currentPageIndex: $currentPageIndex")},
      controller: PageController(
        //初始化首先显示的是第几个页面，默认0
        initialPage: 0,
        //记住用户选中的那个page页面
        keepPage: false,
        //页面占屏幕的比例，默认是全部，根据滚动方向调整
        viewportFraction: 1.0,
      ),
      children: <Widget>[
        Container(
          color: Colors.brown[900],
          //居中
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'ONE',
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white,
            ),
          ),
        ),
        Container(
          color: Colors.grey[900],
          //居中
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'TWO',
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white,
            ),
          ),
        ),
        Container(
          color: Colors.blueGrey[900],
          //居中
          alignment: Alignment(0.0, 0.0),
          child: Text(
            'THREE',
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}
